<template>
  <div id="docConsultation">
    <header>
      <i @click="goBack()"></i>
      <div>申请会诊</div>
    </header>
    <div class="marks" v-if="showMarks">
      <div style="background: #fff;position: fixed;
        left: 50%;top: 50%;transform: translate(-50%, -50%);
        width: 80%;height: 1.15rem;border-radius: 8px;">
        <div class="header" @click.stop='showMarks=false'>
          <i style="background: #000;
                          width:0.12rem;
                          height: 1px;
                          position: absolute;
                          transform: rotate(135deg) translateY(-50%);
                          top:50%;
                          right: 0.04rem;"></i>
          <i style="background: #000;
                      width:0.12rem;
                      height: 1px;
                      position: absolute;
                      transform:rotate(45deg) translateY(-50%);
                          top:50%;
                      right: 0.04rem;"></i>
        </div>
        <div class="swipe swipe1">
          <div class="center">
            <span style="width: 100%;height: 1px;border: 1px dashed #dfdfdf;position: absolute;top:50%;transform: translateY(-50%)"></span>
            <span style="width:1rem;height: 1px;border: 1px dashed #dfdfdf;
                          transform:translateX(-50%) translateY(-50%) rotate(90deg);left:50%;position: absolute;top:50%;"></span>
            <span style="position: absolute;width: 50%;height:0.3rem;line-height:0.3rem;bottom:45%">
              <ul>
                <li style="position: relative;" v-for="(item,key,index) in list1" class="white">
                  <input type="checkbox" v-model="place" :value="item" style="position: absolute;transform:translateX(-50%);left:50%;opacity:0"
                    @click="changeRule($event,item,key)"> {{item}}
                </li>
              </ul>
            </span>
            <span style="position: absolute;width: 50%;height:0.3rem;line-height:0.3rem;top: 54%">
              <ul>
                <li style="position: relative;" v-for="(item,key,index) in list1" class="white1">
                  <input type="checkbox" v-model="place1" :value="item" style="position: absolute;
                                transform:translateX(-50%);left:50%;opacity:0"
                    @click="changeRule1($event,item,key)"> {{item}}
                </li>
              </ul>
            </span>

            <span style="position: absolute;width: 50%;height:0.3rem;line-height:0.3rem;top: 54%;left: 50%;">
              <ul>
                <li style="position: relative;" v-for="(item,key,index) in list2" class="white2">
                  <input type="checkbox" v-model="place2" :value="item" @click="changeRule2($event,item,key)" style="position: absolute;transform:translateX(-50%);left:50%;opacity:0">
                  {{item}}
                </li>

              </ul>
            </span>
            <span style="position: absolute;width: 50%;height:0.3rem;line-height:0.3rem;bottom: 45%;left: 50%;">
              <ul>
                <li style="position: relative;" v-for="(item,key,index) in list2" class="white3">
                  <input type="checkbox" v-model="place3" :value="item" @click="changeRule3($event,item,key)" style="position: absolute;transform:translateX(-50%);left:50%;opacity:0">
                  {{item}}
                </li>
              </ul>
            </span>
          </div>
          <div @click=sure() class="button">确定</div>
        </div>
      </div>
    </div>
    <ul>
      <!-- <li style="background: transparent;">
        <div class='tip'>
          认证成功后，您即可享受不同时间的免费服务，同时可以享受到不同商品的折扣价！
        </div>
      </li> -->

      <li>
        <a>
          姓名:
          <input type="text" v-model="obj.doctorname" placeholder="请输入真实姓名" required @focus='$utils.focus($event)' />
        </a>
      </li>
      <li>
        <a>
          手机号:
          <input type="text" v-model="obj.tel" placeholder="请输入手机号" required @focus='$utils.focus($event)' />
        </a>
      </li>
      <li>
        <a class='proitem' style="border-bottom:1px solid #dfdfdf;padding: 0px;height: 190px;">
          <ul>
            <li>
              口腔卫生:
              <label v-for='(item,index) in mouthArr'>
                <input type="radio" v-model="problem.mouth" :value='item'>
                <i></i>{{item}}
              </label>
            </li>
            <li @click=sel(0)> 龋齿:
              <input type="text" v-model='problem.quchi' style="border:transparent" disabled />
            </li>
            <li @click=sel(1)> 牙周病:
              <input type="text" v-model='problem.yazhou' style="border:transparent" disabled />
            </li>
            <li @click=sel(2)>畸形中央尖:
              <input type="text" v-model='problem.jixing' style="border:transparent" disabled />
            </li>
            <li>
              <a class='proitem guanjie' style="padding: 0px;margin: 0px;border-bottom: 0px">
                <div v-for='(val,key) in guanjieObj'>
                  {{val.name}}(
                  <label v-for='(item,index) in val.selectArr'>
                    <input type="radio" v-model="problem[key]" :value='item'>
                    <i></i>{{item}}
                  </label>)
                  {{val.name=='张口度'?'指':''}}
                </div>
              </a>
            </li>
          </ul>
          <span class='tiankong'>
          </span>
        </a>
      </li>
      <li>
        <a style="border-bottom:0px">
          图片资料:
          <small>----照片+模型+其他</small>
        </a>
      </li>
      <li style="text-align: center">
        <span>模型资料</span>
      </li>
      <li style="display: flex;justify-content:space-around;border-bottom: 1px solid #dfdfdf">
        <a class="picture">
          <p>正面</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                      return handleAvatarSuccess(res,file,0)
                    }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img1" :src="personalData.img1" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/1.jpg" class="avatar avatar1">
        </a>
        <a class="picture">
          <p>合面</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                            return handleAvatarSuccess(res,file,1)
                          }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img2" :src="personalData.img2" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/2.jpg" class="avatar avatar1">

        </a>
        <a class="picture">
          <p>右侧咬合</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                return handleAvatarSuccess(res,file,2)
                              }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img3" :src="personalData.img3" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/3.jpg" class="avatar avatar1">

        </a>
        <a class="picture">
          <p>左侧咬合</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                    return handleAvatarSuccess(res,file,3)
                                  }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img4" :src="personalData.img4" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/4.jpg" class="avatar avatar1">

        </a>
      </li>
      <li style="text-align: center;line-height: 30px">
        <span>照片资料</span>
      </li>
      <li style="display: flex;justify-content:space-around;">
        <a class="picture">
          <p>正面像</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                          return handleAvatarSuccess(res,file,4)
                        }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img5" :src="personalData.img5" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/8.jpg" class="avatar avatar1">
        </a>
        <a class="picture">
          <p>正面微笑像</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                return handleAvatarSuccess(res,file,5)
                              }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img6" :src="personalData.img6" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/9.jpg" class="avatar avatar1">
        </a>
        <a class="picture">
          <p>侧面像</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                    return handleAvatarSuccess(res,file,6)
                                  }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img7" :src="personalData.img7" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/10.jpg" class="avatar avatar1">
        </a>
      </li>
      <li style="display: flex;justify-content:space-around;">
        <a class="picture">
          <p>正面咬合</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                                  return handleAvatarSuccess(res,file,7)
                                                }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img8" :src="personalData.img8" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/11.jpg" class="avatar avatar1">
        </a>
        <a class="picture">
          <p>左侧咬合</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                            return handleAvatarSuccess(res,file,8)
                                          }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img9" :src="personalData.img9" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/12.jpg" class="avatar avatar1">
        </a>
        <a class="picture">
          <p>右侧咬合</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                                  return handleAvatarSuccess(res,file,9)
                                                }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img10" :src="personalData.img10" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/13.jpg" class="avatar avatar1">
        </a>
      </li>
      <li style="display: flex;justify-content:space-around;border-bottom: 1px solid #dfdfdf;">
        <a class="picture">
          <p>覆合覆盖</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                                              return handleAvatarSuccess(res,file,10)
                                                            }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img11" :src="personalData.img11" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/14.jpg" class="avatar avatar1">
        </a>
        <a class="picture">
          <p>上颌咬合面</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                                                  return handleAvatarSuccess(res,file,11)
                                                                }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img12" :src="personalData.img12" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/15.jpg" class="avatar avatar1">
        </a>
        <a class="picture">
          <p>下颌咬合面</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                                                      return handleAvatarSuccess(res,file,12)
                                                                    }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img13" :src="personalData.img13" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/16.jpg" class="avatar avatar1">
        </a>
      </li>
      <li style="text-align: center;line-height:30px">
        <span>X片资料</span>
      </li>
      <li style="display: flex;justify-content:space-around;">
        <a class="picture">
          <p>全景片</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                                                      return handleAvatarSuccess(res,file,13)
                                                                    }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img14" :src="personalData.img14" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/5.jpg" class="avatar avatar1">
        </a>
        <a class="picture">
          <p>侧位片</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                                                          return handleAvatarSuccess(res,file,14)
                                                                        }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img15" :src="personalData.img15" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/7.jpg" class="avatar avatar1">
        </a>
        <a class="picture">
          <p>X牙片</p>
          <el-upload class="avatar-uploader" :action='$api.baseURLUpload+"/photos/upload_shop"' :show-file-list="false"
            :on-success="(res,file)=>{
                                                                                return handleAvatarSuccess(res,file,15)
                                                                              }"
            :before-upload="beforeAvatarUpload">
            <img v-if="personalData.img16" :src="personalData.img16" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img src="../../../image/17.jpg" class="avatar avatar1">
        </a>
      </li>
    </ul>
    <a class="confirmBtn" @click='goNext'>
      下一步
    </a>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        showMarks: false,
        list2: ['1', '2', '3', '4', '5', '6', '7', '8'],
        list1: ['8', '7', '6', '5', '4', '3', '2', '1'],
        mouthArr: ['好', '中', '差'],
        personalData: {
          img1: '',
          img2: '',
          img3: '',
          img4: '',
          img5: '',
          img6: '',
          img7: '',
          img8: '',
          img9: '',
          img10: '',
          img11: '',
          img12: '',
          img13: '',
          img14: '',
          img15: '',
          img16: '',
        },
        guanjieObj: {
          'tanxiang': {
            name: '弹响',
            selectArr: ['无', '有'],
          },
          'pain': {
            name: '疼痛',
            selectArr: ['无', '有'],
          },
          'kaikou': {
            name: '开口型',
            selectArr: ['↓', '↙', '↘'],
          },
          'zhangkou': {
            name: '张口度',
            selectArr: ['1', '2', '3','4'],
          },
        },
        status: 'add', //是查看还是编辑
        kind: '',
        problem: { //以下字段按用户选择填写顺序
          mouth: '',
          quchi: '',
          jixing: '',
          songdong: '',
          yazhou: '',
          tanxiang: '',
          pain: '',
          kaikou: '',
          zhangkou: '',
        },
        relPic: [],
        place: [], //位置
        place1: [], //位置
        place2: [], //位置
        place3: [], //位置
        obj: {
          doctorid: localStorage.getItem("loginMobile"), //医生id
          doctorname: '',
          tel: '',
          problem: '', //问题描述
          relPic: '', //相关图片
        },
      }
    },
    components: {},
    methods: {
      goBack() {
        this.$router.back();
      },
      sel(id) {

        this.kind = id;
        this.showMarks = true;


      },

      sure() {
        var total = [];
        for (var i = 0; i < this.place.length; i++) {
          total.push('1' + this.place[i])
        }
        for (var i = 0; i < this.place3.length; i++) {
          total.push('2' + this.place3[i])
        }
        for (var i = 0; i < this.place2.length; i++) {
          total.push('3' + this.place2[i])
        }
        for (var i = 0; i < this.place1.length; i++) {
          total.push('4' + this.place1[i])
        }

        if (this.kind == 0) {
          this.problem.quchi = total;
        }
        if (this.kind == 1) {
          this.problem.yazhou = total;
        }
        if (this.kind == 2) {
          this.problem.jixing = total;
        }
        this.showMarks = false;
        this.place = this.place1 = this.place2 = this.place3 = [];
      },

      changeRule(e, i, key) { //0指同意或者不同意 1指点的是收费协议
        if (e.target.checked) {
          $('.white').eq(key).addClass('green')
        } else {
          $('.white').eq(key).removeClass('green')
        }
      },
      changeRule1(e, i, key) { //0指同意或者不同意 1指点的是收费协议
        if (e.target.checked) {
          $('.white1').eq(key).addClass('green')
        } else {
          $('.white1').eq(key).removeClass('green')
        }
      },
      changeRule2(e, i, key) { //0指同意或者不同意 1指点的是收费协议
        if (e.target.checked) {
          $('.white2').eq(key).addClass('green')
        } else {
          $('.white2').eq(key).removeClass('green')
        }
      },
      changeRule3(e, i, key) { //0指同意或者不同意 1指点的是收费协议
        if (e.target.checked) {
          $('.white3').eq(key).addClass('green')
        } else {
          $('.white3').eq(key).removeClass('green')
        }
      },

      // 初始化
      init() {
        this.$api.get(this.$api.baseURLSchool, "select_cid/doctor/" + this.obj.doctorid, {}, r => {
          if (r.data.ret == 1) {
            this.obj.doctorname = r.data.info.name;
            this.obj.tel = r.data.info.id;
          }
        }, err => {
          console.log(err);
        })
      },
      //上传图片
      handleAvatarSuccess(res, file, i) {
        if (res.state == 200) {
          if (i == 0) {
            this.personalData.img1 = res.result_origin;
            //身份证反面
          } else if (i == 1) {
            this.personalData.img2 = res.result_origin;
          } else if (i == 2) {
            this.personalData.img3 = res.result_origin;
          } else if (i == 3) {
            this.personalData.img4 = res.result_origin;
          } else if (i == 4) {
            this.personalData.img5 = res.result_origin;
          } else if (i == 5) {
            this.personalData.img6 = res.result_origin;
          } else if (i == 6) {
            this.personalData.img7 = res.result_origin;
          } else if (i == 7) {
            this.personalData.img8 = res.result_origin;
          } else if (i == 8) {
            this.personalData.img9 = res.result_origin;
          } else if (i == 9) {
            this.personalData.img10 = res.result_origin;
          } else if (i == 10) {
            this.personalData.img11 = res.result_origin;
          } else if (i == 11) {
            this.personalData.img12 = res.result_origin;
          } else if (i == 12) {
            this.personalData.img13 = res.result_origin;
          } else if (i == 13) {
            this.personalData.img14 = res.result_origin;
          } else if (i == 14) {
            this.personalData.img15 = res.result_origin;
          }else if (i == 15) {
            this.personalData.img16 = res.result_origin;
          }
          //   this.$set(this.relPic, i, res.result_origin);
        }
      },
      beforeAvatarUpload(file) {
        if (!/image\/\w+/.test(file.type)) {
          this.$utils._toast('请确保文件为图像类型');
          return false;
        }
        if (file.size > 5 * 1024 * 1024) {
          this.$utils._toast('上传图片不能超过5M');
          return false;
        }
      },
      //把用户状态改成已提交未审核
      commit() {

      },
      //下一步
      goNext() {
        this.obj.problem = JSON.stringify(this.problem);
        this.relPic.push(this.personalData)
        this.obj.relPic = JSON.stringify(this.relPic);
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!this.obj.doctorname) {
          this.$utils._toast("真实姓名为必填项！");
          return false;
        } else if (!this.obj.tel) {
          this.$utils._toast("手机号为必填项！");
          return false;
        } else if (!/^1(3|4|5|7|8|9)\d{9}$/.test(this.obj.tel)) {
          this.$utils._toast("手机号不合法！");
          return false;

        } else if (!this.problem.jixing || !this.problem.yazhou || !this.problem.quchi || !this.problem.kaikou ||
          !this.problem.mouth || !this.problem.pain || !this.problem.tanxiang || !this.problem.zhangkou) {
          this.$utils._toast("问题描述为必填项！");
          return false;
        } else {
          this.$router.push({
            name: 'expertList',
            query: {
              obj: JSON.stringify(this.obj)
            }
          });
        }
      },

    },
    created() {
      this.init();
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .proitem ul li {
    height: 30px;
    line-height: 30px;

  }

  .center span ul {
    display: flex;
    justify-content: space-around;
  }

  .center span ul li {
    float: left;
    width: 0.18rem;
    text-align: center;
    font-size: 14px;
    margin: 1px;
    height: 0.18rem;
    line-height: 0.18rem
      /* background: transparent !important; */
  }

  .header {
    position: relative;
    height: 25px;
    z-index: 10;
  }

  .green {
    background: #a3c9f5;
    border-radius: 50%;
    height: 0.18rem;
    line-height: 0.18rem;
  }

  .picture {
    display: flex;
    flex-direction: column;
    text-align: center;
    border-bottom: 0px !important;
  }

  .button {
    position: absolute;
    bottom: -3px;
    right: 10px;
    width: 50px;
    height: 21px;
    line-height: 21px;
    background: #e5322d;
    color: #fff;
    text-align: center;
    border-radius: 8px;
  }

  .avatar1 {
    margin: auto;
  }

</style>
